<template>
	<view>
		<view class="popup popup--fixed popup-candidate-panel flex--row" :class="{'active':visible}" @click="open">
			<view class="candidate-panel flex--col">
				<view class="panel-heading flex--row">
					<text class="text--sub-dark">{{requestingVolunteers.length}}名志愿者请求中</text>
					<image @click.stop="handleCancelRequestRoute" src="@/static/assist/powerOn.svg" class="icon" role="button" aria-label="取消请求当前路线"></image>
				</view>
				<!-- 正在请求列表 -->
				<view class="request" v-show="categoryIndex === 1">
					<FigureList :figureList="requestingVolunteers" @cancelRequest="handleCancelRequestVolunteer" :status="Service.SERVICE_REQUESTING"></FigureList>
				</view>
			</view>
		</view>
		<view class="popup popup--fixed popup-mask" :class="{'active':visible}" @click="visible=false">
			<PopupClose @close="visible=false"></PopupClose>
		</view>
	</view>
</template>

<script>
import FigureList from "./FigureList.vue"
import PanelCategory from "@/components/PanelCategory/PanelCategory.vue"
import PopupClose from "@/components/PopupClose/PopupClose.vue"
import * as Service from "@/core/constant/service.js"
export default{
	props:['requestingVolunteers'],
	emits:['click','cancelRequestRoute','cancelRequestVolunteer'],
	components:{
		FigureList,
		PanelCategory,
		PopupClose
	},
	data(){
		return {
			visible:false,
			Service,
			categoryIndex:1,
		}
	},
	methods:{
		open(){
			this.visible = true;
		},
		handleCancelRequestRoute(){
			this.$emit('cancelRequestRoute')
		},
		handleCancelRequestVolunteer(item){
			this.$emit('cancelRequestVolunteer',item)
		},
		handleChangeCategoryIndex(index){
			this.categoryIndex = index
		}
	}
}
</script>

<style lang="scss" scoped>
	$main-color:rgba(232, 89, 12, 1);
	
	.text--sub-dark{
		font-size: 16px;
		color:#555;
		font-weight: 600;
	}
	
	.popup-candidate-panel{
		transform: translateY(90%); // 默认不显示下面的数据
		transition:all 1s;
		top:48%;
		left:0%;
		width:100%;
		height:50%;
		justify-content: center;
		background:transparent;
		&.active{
			transform: translateY(0);
		}
		z-index:5000;
	}
	
	.popup-mask{
		display: none;
		left:0%;
		top:0%;
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0.3);
		
		z-index: 100;
		&.active{
			display: block;
		}
	}
	
	.candidate-panel{
		@include border-four-roundings;
		width:80%;
		height:95%;
		padding:20px;
		background-color: #fff;
		
		justify-content: flex-start;
		gap:28px;
		align-items: center;
		
		overflow:scroll;
		
		.request{	
			overflow:scroll;
		}
	}
	
	.panel-heading{
		width:100%;
		justify-content: space-between;
		align-items: center;
	}
	
	.panel-category{
		@include border-four-roundings;
		
		gap:24px;
		justify-content: center;
		
		width:100%;
		padding:6px;
		margin-top:auto
	}
	
	.category-item{
		border-radius: 4px;
		padding:2px 12px;
		
		font-size: 16px;
		font-weight: 600;
		color:#555;
		&.active{
			background-color: $main-color;
			color:#fff;
		}
	}
	
	
</style>